import { assignVars } from '@vanilla-extract/css';
import { vars } from '../vars.css';
import { brighten } from '../tools';
import { lightColor } from './colorLight.css';
import { darkColor } from './colorDark.css';

export const autoColorTheme = {
	vars: assignVars(vars, {
		color: {
			accent: lightColor.color.accent,
			success: lightColor.color.success,
			danger: lightColor.color.danger,
			warning: lightColor.color.warning,
			text: `light-dark(${lightColor.color.text}, ${darkColor.color.text})`,
			buttonText: lightColor.color.buttonText,
			emphasizeText: `light-dark(${lightColor.color.emphasizeText}, ${darkColor.color.emphasizeText})`,
			secondaryText: `light-dark(${lightColor.color.secondaryText}, ${darkColor.color.secondaryText})`,
			placeholderText: lightColor.color.placeholderText,
			disabledText: `light-dark(${lightColor.color.disabledText}, ${darkColor.color.disabledText})`,
			border: `light-dark(${lightColor.color.border}, ${darkColor.color.border})`,
			windowBackground: `light-dark( ${lightColor.color.windowBackground}, ${darkColor.color.windowBackground})`,
			panelBackground: `light-dark( ${lightColor.color.panelBackground}, ${darkColor.color.panelBackground})`,
			selection: brighten(vars.color.accent, 0.3),
			selectionBlur: brighten(vars.color.disabledText, 0.1),
			toastBackground: `light-dark(${lightColor.color.toastBackground}, ${darkColor.color.toastBackground})`,
			shadow: `light-dark(${lightColor.color.shadow}, ${darkColor.color.shadow})`,
			mask: `light-dark(${lightColor.color.mask}, ${darkColor.color.shadow})`,
		},
		font: {
			family: 'Microsoft YaHei',
			baseSize: '14px',
		},
		empty: {
			color: {
				0: `light-dark(${lightColor.empty.color[0]}, ${darkColor.empty.color[0]})`,
				1: `light-dark(${lightColor.empty.color[1]}, ${darkColor.empty.color[1]})`,
				2: `light-dark(${lightColor.empty.color[2]}, ${darkColor.empty.color[2]})`,
				3: `light-dark(${lightColor.empty.color[3]}, ${darkColor.empty.color[3]})`,
				4: `light-dark(${lightColor.empty.color[4]}, ${darkColor.empty.color[4]})`,
			},
		},
		layout: {
			smallRadius: '4px',
			middleRadius: '8px',
			largeRadius: '16px',
			inputHeight: '2.6em',
		},
	}),
	colorScheme: 'light dark',
	color: vars.color.text,
	backgroundColor: vars.color.windowBackground,
	fontSize: vars.font.baseSize,
	fill: vars.color.text,
};
